/**
 *                         App页面顶层路由
 *
 *                           code : App
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react';
import { connect } from 'react-redux';
import tx from "../../../../static/img/film/moren-tx.png";
import './DemandList.scss'
import V from "../../../../static/img/h5/V-geren.png";
import qiyeV from "../../../../static/img/h5/V-qiye.png";



class DemandListContainer extends Component{

    constructor(props){
        super(props) ;
        this.state={
            maxContentLength : 140,//详情描述最大展示字数
        };
    }

    //进入个人主页
    queryCreator() {
        // console.log("======userId======",this.props.userId);
        localStorage.setItem("personalId",this.props.taskCreateorId);
        var id = localStorage.getItem('personalId').replace(/\//g, '_').replace(/\+/g, '_').replace(/\=/g, '');
        var viewerKey = sessionStorage.getItem("viewerKey");
        if(viewerKey == null || viewerKey == ""){
            viewerKey = "0";
        }
        window.location.href="/App/MobileMine/"+id+'/'+viewerKey;
        window.scrollTo(0,0);
    }

    //进入详情页面
    queryDetail() {
        MtaH5.clickStat('h5_demanddetails_01');
        window.location.href="/App/DemandDetail/"+ this.props.taskId;
        window.scrollTo(0,0);
    }
    //还原HTML脚本语言
    unescapeHTML(description) {
        let html = description.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
        //需求详细
        return {__html:html};
    }
    //转换金额方法
    moneyFormatFun(num) {
        if (!num) {return ""}
        var result = [ ], counter = 0;
        num = (num || 0).toString().split('');
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result.unshift(num[i]);
            if (!(counter % 3) && i != 0) { result.unshift(','); }
        }
        return result.join('');
    }

    //时间样式调整
    dateFormat(insertDatetime) {
        let newDate = new Date();
        newDate.setTime(insertDatetime*1000);
        let month = newDate.getMonth()+1;
        let day = newDate.getDate();
        if (month.length == 1) {
            month="0"+month;
        }
        if (day.length == 1) {
            day="0"+day;
        }
        return newDate.getFullYear() + "-" + month + "-" + day;
    }

    //将富文本转换的详情描述转化为文字，
    //并对格式进行修改
    getTaskContentStr (htmlStr) {
        if (!htmlStr){return "";}
        let tempDiv = document.createElement('div');//临时div 转换用
        tempDiv.innerHTML = htmlStr;
        // tempDiv = $('#tempDiv');
        htmlStr = tempDiv.innerText + '';
        htmlStr = htmlStr.replace(/(\n)/g, "");
        htmlStr = htmlStr.replace(/(\t)/g, "");
        htmlStr = htmlStr.replace(/(\r)/g, "");
        htmlStr = htmlStr.replace(/<\/?[^>]*>/g, "");
        htmlStr = htmlStr.replace(/\s*/g, "");
        htmlStr = htmlStr.replace(/&nbsp;/g, "");
        tempDiv.innerHTML = "";
        if (htmlStr.length > this.state.maxContentLength) {
            htmlStr = htmlStr.substring(0,this.state.maxContentLength - 10) + '...';
        }
        return htmlStr;
    }

    render(){
        let preBudgetFrom = this.moneyFormatFun(this.props.preBudgetFrom);
        let preBudgetTo = this.moneyFormatFun(this.props.preBudgetTo);
        let money = preBudgetTo;
        if (preBudgetFrom != preBudgetTo) {
            if (!preBudgetFrom) {
                preBudgetFrom = 0;
            }
            money = preBudgetFrom + "-" + preBudgetTo;
        } else {
            if (!preBudgetTo) {
                money = 0;
            }
        }
        let taskType = this.props.taskTypeName;
        if (this.props.taskSubtypeName) {
            taskType = taskType + "/" + this.props.taskSubtypeName;
        }
        let date = this.dateFormat(this.props.insertDatetime);
        let createorHeadUrl = tx;
        if (this.props.createorHeadUrl) {
            createorHeadUrl = this.props.createorHeadUrl;
        }
        let status = 0;
        if (this.props.status == 2 || this.props.status == 3) {
            status = 1;
        }
        return(
            <div>
                <div className="wrap">
                    <div className="content">
                        <div className="content-cont" onClick={this.queryDetail.bind(this)}>
                            <div>
                                <div className="c-l">
                                    {this.props.taskTitle}
                                </div>
                                {
                                    status == 1 ? <div className="c-r">{this.props.statusName}</div>
                                        :<div className="clear"></div>
                                }
                                <div className="clear"></div>
                            </div>
                            <div>
                                <div>{taskType}</div>
                                <div>已有{this.props.registCount}人报名</div>
                                <div>
                                    {money||'0'}元
                                </div>
                                <div className="clear"></div>
                            </div>
                            <div>
                                {this.getTaskContentStr(this.props.taskContent)}
                            </div>
                        </div>

                        <div className="last-box">
                            <div className='list-img-need'>
                                <img className='img-head' onClick={this.queryCreator.bind(this)} src={createorHeadUrl} alt=""/>
                                { this.props.authenticationType
                                && <img className="img-type"
                                        src={this.props.authenticationType === '0'? V : qiyeV}/>}
                            </div>
                            <span onClick={this.queryCreator.bind(this)} >{this.props.displayName}</span>
                            <span>{date}</span>
                            <div className="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const DemandList = connect()(DemandListContainer) ;

export { DemandList as default } ;